
<template>
    <div class="person">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>

        <button @click="changeName"> 修改名字</button>
        <button @click="changeAge"> 修改年龄</button>
 
    </div>
</template>

<script setup lang="ts" name="person">
import { ref } from 'vue'
import { reactive } from 'vue'
import { toRefs } from 'vue'
import { toRef } from 'vue'

//使用ref包裹的对象就是响应式对象，
//就是当值变了能立马反应出来到页面上
let person = ref({
    name:"xiaoming",
    age: 19
})

// toRefs是copy整个对象的所有值
let {name,age} = toRefs(person.value)

// toRef 是 copy 的这个对象的某个值 
let cAge = toRef(person.value,'age')

function changeName(){
    name.value+="`"
}

function changeAge(){
    cAge.value+=1;
    console.log(cAge.value,age.value)
}


</script>

<style lang="css">
.person {
    margin-left: 5px;
    width: 90%;
    background-color: aqua;
}
</style>